<!--
 * @Author: 明月下
 * @Date: 2022-08-04 20:13:49
 * @LastEditors: 明月下
 * @LastEditTime: 2023-03-08 19:57:17
 * @FilePath: \ali-yun-slimming\vue3-vite\src\components\Echarts.vue
 * @Description:
-->
<template>
    <div class="button-list">
        <van-button :plain="dateNum != 8" :round="dateNum == 8" type="primary" @click="changeNum(8)">周</van-button>
        <van-button :plain="dateNum != 31" :round="dateNum == 31" type="success" @click="changeNum(31)">月</van-button>
        <van-button :plain="dateNum != 91" :round="dateNum == 91" type="danger" @click="changeNum(91)">季</van-button>
    </div>
    <div class="echart-box">
        <div id="echartsdemo" ref="myChart"></div>
    </div>
</template>

<script lang="ts">
import echarts from '../utils/Echarts'
import { getByName } from '../api/mongodb'
import { defineComponent, ref, reactive, computed, onMounted } from 'vue'
import { Toast } from 'vant';

export default defineComponent ({
    setup() {
        let dateNum = ref<number>(8)
        function changeNum(num: number) {
            dateNum.value = num
            console.log(dateNum.value, date.value)
            setChart()
        }
        const time: number = new Date().getTime()
        // let date: number[] = [7,6,5,4,3,2,1,0] // 计算天数
        let date = computed<number[]>(() => {
            let list: number[] = []
            for (let i = dateNum.value; i > 0 ;i--){
                list.push(i-1)
            }
            return list
        }
        )
        const myChart = ref<any>()
        const myCharts = ref<any>()
        type Weight = {
            'name': string,
            'value': string,
            [key: string]: string

        }
        let dataList: Weight[]
        async function getInfo() {
            await getByName(null).then(data => {
                // console.log(data)
                dataList = data
                console.log(dataList)
                setChart()
            })
        }
        // setChart 分离请求数据和设置图表
        function setChart() {
            let options = {
                // 标题设置
                // title:{text:'"一斤50！"'},
                tooltip:{},//提示框
                legend:{// 数据标识
                    data:{
                    }
                },
                xAxis: {
                    // data: [getDateByTime(time - 1000*60*60*24*4), getDateByTime(time - 1000*60*60*24*3), getDateByTime(time - 1000*60*60*24*2), getDateByTime(time - 1000*60*60*24*1), getDateByTime(time)]
                    data: date.value.map(date => getDateByTime(time - 1000*60*60*24*date))
                },
                yAxis: {
                    min: 50
                },
                series: [
                ] as any[]
        }
            options.legend.data = dataList.map((item:Weight) => item.name || item.value)
            options.series = dataList.map((item:Weight) => {
                return{
                    data: date.value.map(date => Number(item[getDateByTime(time - 1000*60*60*24*date,'YYYY-MM-DD')]) || '-' ),
                    type: 'line',
                    name: item.name || item.value,
                    label: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                        fontSize: 10
                        }
                    }
                }
            })
            console.log('options', options)
            myCharts.value.setOption(options)
        }
        function getDateByTime(time: number, type: string = 'MM-DD'): string {
            const date: Date = new Date(time)
            if (type === 'MM-DD') {
                return (date.getMonth()+1)+'-'+date.getDate()
            } else {
                return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2,'0') + '-' + date.getDate().toString().padStart(2,'0')
            }
        }
        onMounted(() => {
            myCharts.value = echarts.init(myChart.value)
            // myCharts.value.setOption(options)
            getInfo()
        })
        return {
            myChart,
            dateNum,
            changeNum
        }
    }


})
</script>
<style scoped >
.button-list {
    padding: 30px 0;
}
.button-list {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.echart-box{
    width: 100%;
    height: 100%;
}
#echartsdemo{
    width: 100%;
    height: 400px;
}
</style>
